﻿<CodeSnippetTabbed DocLink="https://docs.devexpress.com/Blazor/DevExpress.Blazor.DxGridLayout#adaptivity">
    <CodeSnippetTabPage Text="Razor">@(@"<DxLayoutBreakpoint DeviceSize=""DeviceSize.XSmall"" @bind-IsActive=""@isXSmallScreen"" />
<DxGridLayout CssClass=""h-100"" ColumnSpacing=""8px"" RowSpacing=""8px"">
    <Rows>
        @if(isXSmallScreen) {
            <DxGridLayoutRow Areas=""item1"" />
            <DxGridLayoutRow Areas=""item2"" />
            <DxGridLayoutRow Areas=""item3"" />
            <DxGridLayoutRow Areas=""item4"" />
            <DxGridLayoutRow Areas=""item5"" />
            <DxGridLayoutRow Areas=""item6"" />
        } else {
            <DxGridLayoutRow Areas=""item1 item3 item5"" />
            <DxGridLayoutRow Areas=""item1 item4 item5""/>
            <DxGridLayoutRow Areas=""item2 item6 item6""/>
        }
    </Rows>
    <Columns>
        <DxGridLayoutColumn Width=""2fr"" />
        @if(!isXSmallScreen) {
            <DxGridLayoutColumn />
            <DxGridLayoutColumn />
        }
    </Columns>
    <Items>
        <DxGridLayoutItem Area=""item1"">
            <Template>
                <div class=""center gridlayout-header gridlayout-item"">
                    Item 1
                </div>
            </Template>
        </DxGridLayoutItem>
        <DxGridLayoutItem Area=""item2"">
            <Template>
                <div class=""center gridlayout-content gridlayout-item"">
                    Item 2
                </div>
            </Template>
        </DxGridLayoutItem>
        <DxGridLayoutItem Area=""item3"">
            <Template>
                <div class=""center gridlayout-left-side-bar gridlayout-item"">
                    Item 3
                </div>
            </Template>
        </DxGridLayoutItem>
        <DxGridLayoutItem Area=""item4"">
            <Template>
                <div class=""center gridlayout-right-side-bar gridlayout-item"">
                    Item 4
                </div>
            </Template>
        </DxGridLayoutItem>
        <DxGridLayoutItem Area=""item5"">
            <Template>
                <div class=""center gridlayout-footer gridlayout-item"">
                    Item 5
                </div>
            </Template>
        </DxGridLayoutItem>
        <DxGridLayoutItem Area=""item6"">
            <Template>
                <div class=""center gridlayout-left-side-bar gridlayout-item"">
                    Item 6
                </div>
            </Template>
        </DxGridLayoutItem>
    </Items>
</DxGridLayout>

@code {
    bool isXSmallScreen;
}
")
    </CodeSnippetTabPage>
</CodeSnippetTabbed>
